<template>
    <div>
        <div v-if="list.length > 0">
            <div v-for="(item,index) in list" :key="index">
                <div class="item">
                    <input type="checkbox" v-model="item.complete">
                    {{item.title}}
                    <button class ="del" @click="del(item,index)">删除</button>
                </div>
            </div>
        </div>
        <div v-else>
            暂无任务
        </div>
    </div>
</template>

<script>
    import {defineComponent,ref} from 'vue'
    import {useStore} from 'vuex'
    export  default defineComponent({
        name: 'navMain',
        //改造list数据通过store获取
        props:{
            list: {
                type: Array,
                required: true
            }
        },
        // emits: ['del'], //定义一个数组
        setup(props,ctx){
            // let list = ref([
            //     {title: '吃饭',complete: true},
            //     {title: '睡觉',complete: false},
            //     {title: '敲代码',complete: false}
            // ])
            //删除任务
            let del = (item,index) =>{
                ctx.emit('del',index)
                console.log(item)
                console.log(index)
            }
            return{
                // list,
                del
            }
        }
    })
</script>

<style scoped lang="scss">
    .item {
        height: 35px;
        line-height: 35px;
        position: relative;
        button{
            position: absolute;
            right: 20px;
            top: 6px;
            display: none;
        }
        &:hover{
            background: #dddddd;
            button{
                display: block;
            }
        }
    }
</style>